import React from 'react'
import Header from '@/components/Header'
import NotFind from '@/components/NotFind'
import '@/pages/manga.less'
import Link from 'next/link'
import conf from '@/config'
import { inject, observer } from 'mobx-react'
@inject(['mangaStore'])
@observer
class Manga extends React.Component {
  static async getInitialProps({ query, mobxStore }) {
    await mobxStore.mangaStore.getMange(query.id)
    return { query }
  }
  Chapters(list) {
    return list.map((item) => {
      return (<Link key={item.number} href={`/chapter?id=${this.props.query.id}&number=${item.number}`}><span key={item.number}>{item.number}</span></Link>)
    })
  }
  render() {
    const { manga } = this.props.mangaStore
    if (!this.props.query.id) return (<NotFind />)
    return (
      <div>
        <Header title={manga.title} description={manga.description} image={conf.cdn(manga.image)} />
        <div className="manga-detail">
          <img src={conf.cdn(manga.image)} />
          <h1>{manga.title}</h1>
          <p>Author:{manga.artist}</p>
          <p>Description:{manga.description}</p>
          <p>Latest Chapter:{manga.latestChapter}</p>
          <p>Status:{manga.status}</p>
          <p className="chapters"><Link href={`/`}><span>Home</span></Link>{this.Chapters(manga.chapters)}</p>
        </div>
      </div>
    )
  }
}
export default Manga
